import React,{Component} from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import './App.css';
import axios from 'axios'

class FormTest extends Component{
constructor(props){
  super(props)
  this.state={
    username: '',
    password: ''
  }
  this.handleSubmit=this.handleSubmit.bind(this)
}
  handleSubmit(){
    console.log(this.state.username,this.state.password);
    axios.post('/user', {
      username: this.state.username,
      password: this.state.password
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  

  render(){
      const onFinish = values => {
        this.setState({
          username: values.username,
          password:values.password
        },()=>this.handleSubmit());
      };
      const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
      };
      const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
      };
      const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
      };
    return (
      <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>
  
        <Form.Item
          label="Password"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>
  
        <Form.Item {...tailLayout} name="remember" valuePropName="checked">
          <Checkbox>Remember me</Checkbox>
        </Form.Item>
  
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" onClick={this.handleSubmit.bind(this)}>
            Submit
          </Button>
        </Form.Item>
      </Form>
    );
  };
}

export default FormTest;